<template>
  <Card dis-hover :bordered="false">
    <Row class="ivu-mb-8" :gutter="8">
      <Col>
        <Select
          v-model="params.project_id"
          @on-change="askData()"
          clearable
          placeholder="请选择项目"
          v-width="200"
        >
          <Option
            v-for="item in projectLists"
            :key="item.value"
            :value="item.value"
            >{{ item.label }}</Option
          >
        </Select>
      </Col>
      <Col>
        <Input
          v-model="params.name"
          @on-enter="askData()"
          @on-clear="askData()"
          clearable
          placeholder="权限组名称搜索"
          v-width="200"
        />
      </Col>
    </Row>

    <Table :columns="columns" :data="data" :loading="loading" :height="650">
      <template slot-scope="{ row }" slot="action">
        <a @click="handlePersonnel(row)">人员</a>
      </template>
      <template slot-scope="{ row }" slot="project">
        <template v-for="(item, index) in row.project_str">
          <Tag type="border" :key="index" v-if="item">{{ item }}</Tag>
        </template>
      </template>
      <template slot-scope="{ row }" slot="channel">
        {{ row.count_channel }}个渠道
      </template>
      <template slot-scope="{ row }" slot="status">
        <Tag color="default">{{ row.status_str }}</Tag>
      </template>
    </Table>

    <Personnel ref="Personnel" @askData="askData"></Personnel>
  </Card>
</template>
<script>
import Personnel from "./Personnel";
import {
  netsettingindex,
  netsettingcondition,
  netsettingDel,
} from "@/api/hqapi";
export default {
  name: "configList",
  components: { Personnel },
  data() {
    return {
      projectLists: [],
      params: {
        project_id: "",
        name: "",
      },
      columns: [
        {
          title: "权限组",
          key: "name",
          minWidth: 120,
          ellipsis: true,
          tooltip: true,
        },
        { title: "项目", slot: "project", minWidth: 120 },
        { title: "状态", slot: "status", width: 90 },
        { title: "人员", key: "count_member", width: 80 },
        { title: "操作", slot: "action", width: 80 },
      ],
      data: [],
      loading: false,
    };
  },
  methods: {
    initial() {
      this.askData();
      netsettingcondition().then((res) => {
        this.projectLists = res.project;
      });
    },
    askData() {
      this.loading = true;
      netsettingindex(this.params).then((res) => {
        this.data = res;
        this.loading = false;
      });
    },
    handlePersonnel(row) {
      this.$refs.Personnel.initial(row);
    },
  },
};
</script>
